import React, { Component } from 'react'
// 从react-redux 引入 高阶组件 connect
// 参数组件其实就是展示组件（UI组件），返回的组件就是 容器组件
import { connect } from 'react-redux'
// 展示组件 - UI组件
class List1 extends Component {
  render() {
    return (
      <div>
        <h1>list1</h1>- { this.props.list }
        <button onClick = { () => {
          this.props.changeList([44, 55, 66])
        }}>456</button>
      </div>
    )
  }
}

// 实际上 connect() 才是高阶组件
// connect()(List1)  --- fn(1)(2)(3)  ---  函数的柯里化
// 解决两个问题： 容器组件给展示组件提供数据？ 展示组件的业务需要在容器组件完成
// connect(mapStateToProps, mapDispatchToProps)


// 负责给UI组件提供数据，UI组件通过 props 属性获取
const mapStateToProps = (state) => {
  // state 表示全部的状态
  return {
    list: state.list
  }
}

// 负责定义函数，函数可以为实现UI组件的业务逻辑,UI组件通过 props 属性调用 这里定义的函数，可以传递参数
const mapDispatchToProps = (dispatch) => { 
  // dispatch 用来触发reducer,从而修改状态
  return {
    changeList (params) {
      dispatch({
        type: 'CHANGE_LIST',
        payload: params
      })
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(List1)


/**
 * fn(1)(2)(3)
 * 
 * 实现fn 函数， 使得结果 6
 * function fn (a) {
 *  return function (b) {
 *    return function (c) {
 *      return a + b +c
 *    }
 * }
 * }
 */